<template>
  <div class="login-container">
    <a-typography-title :level="3">登录</a-typography-title>
    <a-form :model="formState" name="basic" class="login-form" :wrapper-col="{ span: 24 }" hideRequiredMark
      autocomplete="off" @finish="onFinish">
      <a-form-item :colon="false" name="userName" :rules="[{ required: true, message: '请输入用户名!' }]">
        <a-input v-model:value="formState.userName">
          <template #prefix>
            <user-outlined type="user" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item :colon="false" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <lock-outlined type="user" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" block>登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();
const redirect = ref<any>();
interface FormState {
  userName: string;
  password: string;
}

const formState = reactive<FormState>({
  userName: "",
  password: "",
});

const onFinish = (values: FormState) => {
  const { userName, password } = values;

  const params = {
    userName,
    password,
  };
  store.dispatch("user/login", params).then(() => { });
  router.push({
    path: "/base",
  });
  message.success("登录成功");
};
watch(() => redirect, (n, o) => {
  redirect.value = route.query && route.query.redirect;
},
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: url("../../assets/img/entryBg.png") no-repeat;
  background-size: cover;
  background-position: center;

  .login-form {
    width: 350px;
  }
}

:deep(.ant-input-affix-wrapper) {
  padding: 0px 10px;
}
</style>
